<template>
  <div class="container">
      <span>热门科室</span>
       <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="排名">
        <template slot-scope="scope">
          <div class="radioCss" :class="{
            'red':scope.$index + 1 == 1,
            'green':scope.$index + 1 == 2,
            'yellow':scope.$index + 1 == 3,
            'blue':scope.$index + 1 == 4,
            'gray':scope.$index + 1 == 5,
            }">{{scope.$index + 1}}</div>
        </template>
        </el-table-column>
         <el-table-column  prop="name" label="科室"> </el-table-column>
         <el-table-column  prop="count" label="挂号量"> </el-table-column>
        </el-table>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  // props: {
  //   registrationData: {
  //     type: Object,
  //     required: true
  //   },
  // },
  // watch: {
  //   registrationData: {
  //     deep: true,
  //     handler(val) {
  //       this.initData(val)
  //     }
  //   }
  // },
  data() {
    return {
      tableData: [
        {name:'内科',count:120},
         {name:'外科',count:110},
        {name:'眼科',count:90},
        {name:'心血管内科',count:80},
        {name:'发热门诊',count:70},
      ]
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initData();
    })
  },
  methods: {
      //初始化实施挂号数据
      initData(){
        console.log("挂号数据")
      }
  }
}
</script>

<style scoped="scoped">
  .container{
    background-color: #FFFFFF;
  }
  .radioCss{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #FFFFFF;
  }
  .red{
    background:linear-gradient(#F37D81,#ffffff);
  }
  .green{
    background:linear-gradient(#57DD7A,#ffffff);
  }
  .yellow{
    background:linear-gradient(#FEA150,#ffffff);
  }
  .blue{
    background:linear-gradient(#283AF4,#ffffff);
  }
  .gray{
    background:linear-gradient(#B8B8B8,#ffffff);
  }

</style>
